﻿@{
    ViewData["Title"] = "OrderList";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>OrderList</h1>

<div class="layui-form-item">
    <form class="layui-form layui-row layui-col-space20">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn" id="btn1" value="0">全部</button>
            <button type="button" class="layui-btn" id="btn2" value="1">待入住</button>
            <button type="button" class="layui-btn" id="btn3" value="2">入住中</button>
            <button type="button" class="layui-btn" id="btn4" value="3">已退房</button>
            <button type="button" class="layui-btn" id="btn5" value="4">已结算</button>
            <button type="button" class="layui-btn" id="btn6" value="5">超时未入住</button>
            <button type="button" class="layui-btn" id="btn7" value="6">已取消</button>
        </div>
        <div class="layui-row">

            <div style="margin-right:850px">
                <div class="layui-col-sm2" style="width:100px;">
                    <select id="nameType" name="nameType">
                        <option value="1">房客姓名</option>
                        <option value="2">证件号</option>
                        <option value="3">手机号</option>
                        <option value="4">房号</option>
                    </select>
                </div>
                <div class="layui-col-sm2" style="width:100px;">
                    <input type="text" id="serchName" name="serchName" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
        </div>
    </form>
</div>
<table class="layui-table" id="demoTable" lay-filter="demoTable">
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
@* //办理入住 *@
<div id="banliruzhu" style="display:none">
    <form class="layui-form">

        <div class="layui-form-item">
            <label class="layui-form-label">房型</label>
            <div class="layui-input-block">
                <input type="text" id="roomname" name="roomname" placeholder="房型名称" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房间号码</label>
            <div class="layui-input-block">
                <input type="text" id="numbername" name="numbername" placeholder="房号" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">房间状态</label>
            <div class="layui-input-block">
                <input type="text" id="stayState" name="stayState" placeholder="房号" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-block">
                <input type="text" id="orderCode" name="orderCode" placeholder="房号" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="text" id="phoneNumber" name="phoneNumber" placeholder="手机号码" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房客名称</label>
            <div class="layui-input-block">
                <input type="text" id="tenantName" name="tenantName" placeholder="房客名称" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">证件类型</label>
            <div class="layui-input-block">
                <select name="certificateType" id="certificateType" lay-filter="certificateType">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">证件号码</label>
            <div class="layui-input-block">
                <input type="text" id="certficNumber" name="certficNumber" placeholder="证件号码" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button class="layui-btn" type="button" lay-submit lay-filter="submitForm">确认</button>
            </div>
        </div>

    </form>
</div>
<script>
    layui.use(['table', 'jquery', 'layer', 'form', 'laypage'], function () {

        var tatolcount = 0;
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;

        form.on('select(dropdown)', function (data) {
            $('#inputBox').val(data.value);
        });
        $('#btn1').click(function () {
            from.roomState = 0;
            queryTable();
        });

        $('#btn2').click(function () {
            from.roomState = 1;
            queryTable();
        });

        $('#btn3').click(function () {
            from.roomState = 2;
            queryTable();
        });

        $('#btn4').click(function () {
            from.roomState = 3;
            queryTable();
        });

        $('#btn5').click(function () {
            from.roomState = 4;
            queryTable();
        });

        $('#btn6').click(function () {
            from.roomState = 5;
            queryTable();
        });

        $('#btn7').click(function () {
            from.roomState = 6;
            queryTable();
        });

        var from = {
            roomState: 0,
            nameType: 1,
            serchName: ""
        }

        function queryTable() {
            var data = {
                roomState: from.roomState,
                nameType: from.nameType,
                serchName: from.serchName
            };

            $.ajax({
                url: 'http://localhost:5174/api/RoomType/GetroomOrderOutputs',
                type: 'get',
                dataType: 'json',
                // contentType: "application/json",
                data: {
                    roomState: from.roomState,
                    nameType: from.nameType,
                    serchName: from.serchName
                },
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (res) {
                    table.render({
                        elem: '#demoTable',
                        data: res.data,
                        cols: [[
                            { field: 'roomName', title: '房型名称' },
                            { field: 'roomNumber', title: '房号' },
                            {
                                field: 'stayState', title: '状态', templet: function (d) {
                                    if (d.stayState == 1) {
                                        return "待入住";
                                    }
                                    if (d.stayState == 2) {
                                        return "入住中";
                                    }
                                    if (d.stayState == 3) {
                                        return "已退房";
                                    }
                                    if (d.stayState == 4) {
                                        return "已结算";
                                    }
                                    if (d.stayState == 5) {
                                        return "超时未入住";
                                    }
                                    if (d.stayState == 6) {
                                        return "已取消";
                                    }
                                }
                            },
                            { field: 'tenantName', title: '客人姓名' },
                            { field: 'liveTime', title: '(预)抵达时间' },
                            { field: 'leaveTime', title: '(预)离店时间' },
                            {
                                field: 'customerInformation', title: '客户类型', templet: function (d) {
                                    if (d.customerInformation == 1) {
                                        return "普通用户";
                                    }
                                    if (d.customerInformation == 2) {
                                        return "会员";
                                    }
                                }
                            },
                            {
                                field: 'stayState', title: '操作', templet: function (d) {

                                    if (d.stayState === 1) {
                                        return '<a href="#" class="layui-btn layui-btn-xs " lay-event="banli">入住</a>' +
                                            '<a href="#" class="layui-btn layui-btn-xs" lay-event="Apply">申请售后</a>'
                                    }
                                    if (d.stayState === 2) {
                                        return '<a href="#" class="layui-btn layui-btn-xs"  lay-event="confirmCheckIn">退房</a>' +
                                            '<a href="#" class="layui-btn layui-btn-xs " lay-event="cancelCheckIn">结算</a>' +
                                            '<a href="#" class="layui-btn layui-btn-xs"  lay-event="modifyInfo">详情</a>' +
                                            '<a href="#" class="layui-btn layui-btn-xs" lay-event="Apply">申请售后</a>';
                                    } else {
                                        return '<a href="#" class="layui-btn layui-btn-xs" onclick="modifyInfo()">详情</a>' +
                                            '<a href="#" class="layui-btn layui-btn-xs" lay-event="Apply">申请售后</a>';
                                    }
                                }
                            }
                        ]],
                        //page: true
                    });
                },
                error: function (error) {
                    console.error(error);

                }
            })
        }
        //文本框失去焦点事件
        $('#serchName').on('blur', function () {
            from.nameType = $("[name=nameType]").val();
            from.serchName = $("[name=serchName]").val();
            // 在这里调用查询函数
            queryTable()
        });
        //显示
        queryTable()
        table.on('tool(demoTable)', function (obj) {
            var data = obj.data;
            console.log(obj.data)
            if (obj.event === 'cancelCheckIn') {
                $.ajax({
                    url: 'http://localhost:5174/api/Pays/AlipaySubmit', // 替换为实际获取数据的接口 URL
                    type: 'get',
                    data: {
                        tradeNo: obj.data.orderCode,
                        subject: obj.data.roomName,
                        totalAmount: obj.data.reservationMoney,
                        body: obj.data.shopComment,
                    },
                    success: function (res) {
                        if (res.result) {

                            window.open()?.document?.write(res.formData)
                        } else {
                            layui.mag(res.formData);
                        }
                    },
                    error: function () {
                        console.error('获取反填数据失败');
                    }
                });
            }
            if (obj.event === 'confirmCheckIn') {
                var data = obj.data;
                console.log(obj.data)
                var dateValue = data.liveTime;
                var datevaluetwo = data.leaveTime;
                var orderstate = data.orderState;
                var statusText = '';
                if (orderstate == 1) {
                    statusText = "待入住";
                }
                if (orderstate == 2) {
                    statusText = "入住中";
                }
                if (orderstate == 3) {
                    statusText = "已退房";
                }
                if (orderstate == 4) {
                    statusText = "已结算";
                }
                if (orderstate == 5) {
                    statusText = "超时未入住";
                }
                if (orderstate == 6) {
                    statusText = "已取消";
                }
                var liveTime = dateValue.substring(0, 10);
                var leaveTime = datevaluetwo.substring(0, 10);
                var formContent = `
                                            <form class="layui-form">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">房型名称</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="roomName" value="${data.roomName}" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                                                    </div>
                                                </div>
                                                     <div class="layui-form-item" style="display:none">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-block">
                            <input type="text" id="orderCode" name="orderCode" value="${data.orderCode}" placeholder="编号" class="layui-input" disabled>
                    </div>
                </div>


                  <div class="layui-form-item" style="display:none">
                <label class="layui-form-label">房间状态</label>
                <div class="layui-input-block">
                        <input type="text" id="stayState" name="stayState" value="${data.stayState}" placeholder="状态" class="layui-input" disabled>
                </div>
            </div>


                                                       <div class="layui-form-item">
                                                             <label class="layui-form-label">房间号码</label>
                                                            <div class="layui-input-block">
                                                                            <input type="text" name="roomName" value="${data.roomNumber}" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                                                            </div>
                                                    </div>

                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">消费金额</label>
                                                    <div class="layui-input-block">
                                                                    <input type="text" name="roomNumber" value="${data.reservationMoney}" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                                                    </div>
                                                </div>

                                                          <div class="layui-form-item">
                                                     <label class="layui-form-label">支付方式</label>
                                                     <div class="layui-input-block">
                                                    <select name="payTypeOrder" id="payTypeOrder" lay-filter="支付方式" lay-search="required"></select>
                                                     </div>
                                                 </div>

                                         <div class="layui-form-item">
                                                  <label class="layui-form-label">会员抵扣：</label>
                                                  <div class="layui-input-block">
                                                     <input type="checkbox" lay-filter="showHide" id="showHideCheckbox" name="showHideCheckbox" >使用会员优惠折扣
                                                  </div>
                                                </div>

                                              <div class="layui-form-item" id="hiddenData" style="display:none" >
                                         <label class="layui-form-label">会员折扣</label>
                                         <div class="layui-input-block">
                                             <input type="text" name="hiddenInput" value="10" lay-verify="required" autocomplete="off" class="layui-input">
                                         </div>
                                     </div>

                                          <div class="layui-form-item">
                                                                <label class="layui-form-label">实付金额</label>
                                                                <div class="layui-input-block">
                                                                                            <input type="text" name="payMoney" value="${data.reservationMoney}" id="payMoney" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                                                                </div>
                                                            </div>

                                                <div class="layui-form-item">
                                                    <div class="layui-input-block">
                                                        <button class="layui-btn" lay-submit lay-filter="formSubmit">确定</button>
                                                    </div>
                                                </div>
                                            </form>
                                        `;
                layer.open({
                    type: 1,
                    area: ['30%', '30%'],
                    title: '退房',
                    content: '<div>原房间：' + data.roomName + ', ' + data.roomNumber + ',' + statusText + '住宿时间' + liveTime + '~' + leaveTime + '</div><button class="layui-btn layui-btn-xs" onclick="confirmAction()">确定</button>',
                    success: function (layero, index) {
                        // 为确定按钮添加点击事件
                        $(layero).find('button').click(function () {
                            getpaysselect()
                            // 在这里编写确定按钮的处理逻辑
                            console.log('确定按钮被点击');

                            layer.open({
                                type: 1,
                                area: ['60%', '60%'],
                                title: '退房结算',
                                content: formContent,
                                success: function (layero, index) {
                                    form.render('checkbox');

                                    // 为确定按钮添加点击事件
                                    $(layero).find('button').click(function () {
                                        // 在这里编写确定按钮的处理逻辑
                                        console.log('确定按钮被点击');

                                        layer.close(index);
                                    });
                                }
                            });
                            layer.close(index);
                        });
                    }
                });

            }
            if (obj.event === 'modifyInfo') {
                // 处理详情的逻辑
                alert('您点击了详情按钮！');
            }
            if (obj.event === 'banli') {
                getpayselect()
                $("#roomname").val(obj.data.roomName)
                $("#orderCode").val(obj.data.orderCode)
                $("#stayState").val(obj.data.stayState)
                $("#numbername").val(obj.data.roomNumber)
                $("#phoneNumber").val(obj.data.phoneNumber)
                $("#tenantName").val(obj.data.tenantName)
                console.log(obj)
                //处理入住的逻辑
                layer.open({
                    type: 1,
                    title: '弹出层标题',
                    shade: false,
                    area: ['500px', '300px'],
                    content: $('#banliruzhu'), // 捕获的元素
                });
            }
            if (obj.event === 'Apply') {
                var fromm = {
                    AfterSalesNumber: "data.afterSalesNumber",
                    OrderNumber: obj.data.orderCode,
                    OrderType: 1,
                    AfterSalesPrice: obj.data.reservationMoney,
                    AfterSalesDate: "2023-03-03",
                    AfterSalesClient: obj.data.tenantName,
                    OrderTypes: 1,
                    AfterSaleState: 1
                }
                $.ajax({
                    url: 'http://localhost:5174/api/AfterSale/AddAfterOrder',
                    type: 'post',
                    contentType: "application/json",
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    data: JSON.stringify(fromm),
                    success: function (res) {
                        console.log(res)
                        // 添加成功后的操作
                        if (res > 0) {
                            layer.msg("添加成功");
                            location.href = "/AfterManagement/RoomReservationOrder";
                        }
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            }
        });

        //点击多选框显示或者隐藏信息
        form.on('checkbox(showHide)', function (data) {
            var originalAmount = parseInt($('#payMoney').val());
            if (data.elem.checked) {
                $('#hiddenData').show();
                $('#payMoney').val(originalAmount - 10);
            } else {
                $('#hiddenData').hide();
                $('#payMoney').val(originalAmount);
            }
        });
        //办理结算
        form.on('submit(formSubmit)', function (data) {
            var orderCode = data.field.orderCode;
            var stayState = data.field.stayState
            var payMoney = data.field.payMoney;
            var payTypeOrder = data.field.payTypeOrder;

            console.log(data.field)
            data.elem.disabled = true;//防止重复提交
            var alltada = {
                orderCode: orderCode,
                stayState: stayState,
                payMoney: payMoney,
                payTypeOrder: payTypeOrder
            };
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/settlement',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(alltada),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("结算成功");
                        queryTable()
                    }
                }
            });
            return false;
        });
        //绑定下拉框支付类型
        function getpaysselect() {
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/GetpayType',  // 替换为实际的服务器数据源地址
                type: 'GET',
                success: function (response) {
                    console.log(response)
                    content = ``;
                    response.forEach(item => {
                        content += `<option value="${item.value}">${item.name}</option>`

                    });
                    $("#payTypeOrder").html(content);
                    form.render('select');
                },
                error: function (error) {
                    console.error('获取数据源时出错:', error);
                }
            });
        }
        //绑定下拉框证件类型
        function getpayselect() {
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/GetCradle',  // 替换为实际的服务器数据源地址
                type: 'GET',
                success: function (response) {
                    console.log(response)
                    content = ``;
                    response.forEach(item => {
                        content += `<option value="${item.value}">${item.name}</option>`

                    });
                    $("#certificateType").html(content);
                    form.render('select');
                },
                error: function (error) {
                    console.error('获取数据源时出错:', error);
                }
            });
        }
        //办理入住
        form.on('submit(submitForm)', function (data) {

            console.log(data.field)
            data.elem.disabled = true;//防止重复提交
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/Banlistay',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("已经办理入住");
                        queryTable()
                    }
                }
            });
            return false;
        });
    })
</script>